簡介:通過本課程,讓您掌握鼠標(biāo)滾輪事件的細(xì)節(jié),并能通過掌握細(xì)節(jié)實現(xiàn)自定義滾動條的效果。我們學(xué)完后也可以將鼠標(biāo)滾輪事件封裝成組件,通過封裝的組件實現(xiàn)一個復(fù)雜的交互效果,深入理解滾輪事件的交互。
第1章 介紹課程目標(biāo)和學(xué)習(xí)內(nèi)容
通過詳細(xì)的細(xì)分教學(xué),讓學(xué)生掌握鼠標(biāo)滾輪事件的細(xì)節(jié),并能通過掌握的細(xì)節(jié)實現(xiàn)自定義滾動條的效果。并能將鼠標(biāo)滾輪事件封裝成組件。通過封裝的組件實現(xiàn)一個復(fù)雜的交互效果,深入理解滾輪事件的交互
第2章 案例HTML和CSS搭建
分析并完成示例的HTML結(jié)構(gòu),并同時完成標(biāo)簽區(qū)域和滾動區(qū)域的樣式,實現(xiàn)案例整體外觀。
第3章 實現(xiàn)案例交互
介紹自調(diào)用匿名函數(shù),jQuery.extend方法的使用,實現(xiàn)可復(fù)用的JS代碼組織結(jié)構(gòu)。講解拖動滑塊內(nèi)容滾動的思路,以及基本的事件綁定與解除,事件命令空間的使用,了解jQuery中outerHeight()與height()的區(qū)別,掌握實現(xiàn)標(biāo)簽切換時實現(xiàn)文章定位的思路。
第4章 總結(jié)課程
通過本課程,我們學(xué)習(xí)了鼠標(biāo)的滾輪事件,以及如何封裝成jQuery事件組件。結(jié)合實際的例子,我們實現(xiàn)了如何通過鼠標(biāo)滾輪事件控制文本內(nèi)容的滾動。